/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-07-18 09:09:27
 * @LastEditors: lcz
 * @LastEditTime: 2022-07-18 15:23:44
 */
import React, { ReactNode, CSSProperties } from 'react'
import { Button } from 'antd'

export type ButtonType = 'primary' | 'dashed' | 'text' | 'link'
export type SizeType = 'large' | 'small'
export type shapeType = 'default' | 'circle' | 'round'
export type targetType = '_self' | '_blank' | '_top' | '_parent'

export interface baseProps {
  class?: string
  style?: CSSProperties | undefined
  tabIndex?: number
}

/* 
  ghost:幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
  block:属性将使按钮适合其父宽度。
  danger: 危险样式
*/

export interface ButtonProps extends baseProps {
  type?: ButtonType
  size?: SizeType
  shape?: shapeType
  icon?: ReactNode
  children?: ReactNode
  loading?: boolean
  ghost?: boolean
  block?: boolean
  danger?: boolean
  disabled?: boolean
  href?: string
  target?: targetType
  onClick?: (e: any) => void
}

const ButtonComponent: React.FC<ButtonProps> = props => {
  return (
    <Button
      className={props.class}
      style={props.style}
      tabIndex={props.tabIndex}
      type={props.type}
      size={props.size}
      icon={props.icon}
      block={props.block}
      loading={props.loading}
      ghost={props.ghost}
      danger={props.danger}
      disabled={props.disabled}
      href={props.href}
      target={props.target}
      onClick={props.onClick}
    >
      {props.children}
    </Button>
  )
}

export default ButtonComponent
